<form class="form-horizontal" id="addForm">
    <div class="box-body">
        <div class="form-group">
            <label  class="col-sm-3 control-label">美食名称 <span class="red">*</span>:</label>
            <div class="col-sm-8">
                <input  name="name" class="form-control" require="">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">美食描述 :</label>
            <div class="col-sm-8">
                <input  name="description" class="form-control">
            </div>
        </div>
        <div class="form-group ">
            <label for="coverImage" class="col-sm-3 control-label">封面图片 :</label>
            <div class="col-lg-6 col-sm-8 col-xs-12">
                <input  type="text" th:value="@{/img/add.png}"  style="display: none" class="form-control" id="coverImage" name="coverImage" require="">
                <p>
                <div class="upload imgLog2">
                    <!--<span><i class="glyphicon glyphicon-open"></i>上传</span>-->
                </div>
                </p>
            </div>
        </div>

        <div class="form-group">
            <label for="contentImage" class="col-sm-3 control-label">详情图片 :</label>
            <div class="col-lg-6 col-sm-8 col-xs-12">
                <input  type="text" th:value="@{/img/add.png}" style="display: none" class="form-control" id="contentImage" name="contentImage" require="">
                <p>
                <div class="upload imgLog2">
                    <!--<span><i class="glyphicon glyphicon-open"></i>上传</span>-->
                </div>
                </p>
            </div>
        </div>

        <div class="form-group">
            <label  class="col-sm-3 control-label">单价(元) :</label>
            <div class="col-sm-8">
                <input  name="price" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">店长推荐 :</label>
            <div class="tags col-sm-8 checkbox icheck">
                <label>
                    <input class="minimal" type="radio" name="recommended" checked value="1">是
                </label>
                <label>
                    <input class="minimal" type="radio" name="recommended" value="0">否
                </label>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">菜品分类 :</label>
            <div class="col-sm-8">
                <select id="category-select"  class="form-control" name="categoryId" require="">
                    <option th:each="category:${categories}" th:value="${category.id}" th:text="${category.name}"
                            >
                    </option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">菜品标签 :</label>
            <div class="tags checkbox icheck col-sm-8">
                <label th:each="tag:${tags}">
                    <input class="minimal" type="checkbox" name="tag" th:value="${tag.id}"
                           th:text="${tag.name}">
                </label>
            </div>
        </div>

    </div>
    <div class="box-footer">
        <div class="pull-right">
            <button type="button" id="saveDetail" class="btn btn-info">确定</button>
            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
        </div>
    </div>
</form>
<script>
    function ImgUpload(node,width,height,linHeight){
        var _this = this;
        this._node = node;
        this.width = width + 'px';
        this.height = height + 'px';
        this.linHeight = linHeight + 'px';
        this.setCss();
        this.createFile();
    }

    ImgUpload.prototype.createFile = function(){
        $(this._node).append('<input type="file"/>')
    }

    ImgUpload.prototype.setCss = function(){
        $(this._node).css({
            "width":this.width,
            "height":this.height,
            "line-height":this.linHeight,
        })
    }

    ImgUpload.prototype.setSpan = function(_this){
        $(_this).siblings().css("opacity",0);
    }

    function upload(formdata,callback){
        $.ajax({
            data : formdata,
            type : "POST",
            async:false,
            url : "/attachment/upload", //图片上传出来的url，返回的是图片上传后的路径，http格式
            cache : false,
            contentType : false,
            processData : false,
            dataType : "json",
            success: function(res) {
                if (res.status == 200){
                    url = res.url
                    if (callback){
                        callback(url);
                    }

                } else{
                    layer.msg(res.msg);
                }
                console.log(res)
            },
            error:function(){
                layer.msg("上传失败");
            }
        });
    }

    $(function () {


        $("#saveDetail").click(function () {
            if (doValidForm("#addForm")) {

                Core.mask("#saveDetail");
                Core.postAjax("/food/add",$("#addForm").serialize(),function (data) {
                    if (data.status == 200) {
                        Core.unmask("#saveDetail");
                        $("#dataAddModal").modal("hide");
                        Core.refreshTable("#table",true);
                    }
                    layer.msg(data.msg);
                })
            }
        });

        var img2 = new ImgUpload('.imgLog2',100,100,100);
        var img3 = new ImgUpload('.imgLog3',100,100,100);
        var coverImage_url = $("#coverImage").val()
        $(".imgLog2 input").parent().css('background','url('+coverImage_url+')0% 0% / cover')
        img2.setSpan(this)
        var contentImage_url = $("#contentImage").val()
        $(".imgLog3 input").parent().css('background','url('+contentImage_url+')0% 0% / cover')
        img3.setSpan(this)
        $(document).on('change',".imgLog2 input",function(e){
            //模拟后台返回url
            var formdata = new FormData();
            formdata.append("file", e.target.files[0]);
            var _this = this
            var callback = function(url){
                $("#coverImage").val(url)
            }
            upload(formdata,callback)
            var url = $("#coverImage").val()
            $(this).parent().css('background','url('+url+')0% 0% / cover')
            img2.setSpan(this)

        });

        $(document).on('change',".imgLog3 input",function(e){
            //模拟后台返回url
            var formdata = new FormData();
            formdata.append("file", e.target.files[0]);
            var callback = function(url,_this){
                $("#contentImage").val(url)

            }
            upload(formdata,callback)
            var url = $("#contentImage").val()
            $(this).parent().css('background','url('+url+')0% 0% / cover')
            img3.setSpan(this)

        });
    });
</script>